<template>
  <div id="div1" ref="editor"></div>
  <!-- <wang-editor @ChangePicture="ChangePicture" :value="editorval" /> -->
</template>

<script>
import E from "wangeditor";
import { getToken } from "@/utils/auth";
export default {
  name: "",
  components: {},
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      editor: null,
      info_: null,
      // editorval:''    赋值回显内容
    };
  },
  computed: {},
  watch: {
    value: function (value) {
      console.log(
        "value !== this.editor.txt.html()",
        value !== this.editor.txt.html()
      );
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value);
      }
    },
  },
  created() {
    this.$nextTick(() => {
      this.seteditor();
      this.editor.txt.html(this.value);
    });
  },
  mounted() {},
  methods: {
    // ChangePicture(val) {
    //   console.log("你是人间四月天", val);
    //   this.intro = val;
    // },
    seteditor() {
      var that = this;
      const editor = new E(this.$refs.editor);
      this.editor = editor;
      // 取消自动 focus
      editor.config.focus = false;
      // 配置 图片server 接口地址
      editor.config.uploadImgServer =
        "https://pc.mabababiancheng.com/community/article/article/uploadImage";
      editor.config.uploadImgHeaders = {
        token: getToken(),
      };
      editor.config.uploadFileName = "image"; // 后端接受上传文件的参数名（这是配置图片）
      editor.config.uploadImgParams = {
        type: 8,
      };
      editor.config.uploadImgMaxLength = 1; // 限制一次最多上传 3 张图片
      editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置

      editor.config.uploadImgHooks = {
        fail: (xhr, editor, result) => {
          // 插入图片失败回调
        },
        success: (xhr, editor, result) => {
          // 图片上传成功回调
        },
        timeout: (xhr, editor) => {
          // 网络超时的回调
        },
        error: (xhr, editor) => {
          // 图片上传错误的回调
        },
        customInsert: (insertImg, result, editor) => {
          // 图片上传成功，插入图片的回调
          //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
          //insertImg()为插入图片的函数
          //循环插入图片
          // for (let i = 0; i < 1; i++) {
          // postAction('/content/picture',{file})
          let url = that.GLOBAL.$image + result.data.imageUrl;
          console.log(url);
          insertImg(url);
          // }
        },
      };
      // 配置 视频server 接口地址
      editor.config.uploadVideoServer =
        "https://pc.mabababiancheng.com/community/articleApi/article/uploadImageFWB";
      editor.config.uploadVideoHeaders = {
        token: getToken(),
      };
      editor.config.uploadVideoName = "file";
      editor.config.uploadVideoParams = {
        type: 8,
      };
      //上传视频的回调
      editor.config.uploadVideoHooks = {
        // 上传视频之前
        /*        before: function(xhr) {
          console.log(xhr)
          // 可阻止视频上传
          return {
            prevent: true,
            msg: '需要提示给用户的错误信息'
          }
        },*/
        // 视频上传并返回了结果，视频插入已成功
        success: function (xhr) {
          console.log("success", xhr);
        },
        // 视频上传并返回了结果，但视频插入时出错了
        fail: function (xhr, editor, resData) {
          console.log("fail", resData);
        },
        // 上传视频出错，一般为 http 请求的错误
        error: function (xhr, editor, resData) {
          console.log("error", xhr, resData);
        },
        // 上传视频超时
        timeout: function (xhr) {
          console.log("timeout");
        },
        // 视频上传并返回了结果，想要自己把视频插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: { url : '.....'} } 这种格式，可使用 customInsert
        customInsert: function (insertVideoFn, result) {
          // result 即服务端返回的接口
          console.log("customInsert", that.GLOBAL.$image + result.data.link);
          let url = that.GLOBAL.$image + result.data.link;
          // insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可

          insertVideoFn(url);
        },
      };
      editor.config.onchange = (html) => {
        this.info_ = html; // 绑定当前逐渐地值
        this.$emit("ChangePicture", this.info_); // 将内容同步到父组件中
      };

      editor.create();
    },
  },
};
</script>

<style lang="scss">
#div1 {
  width: 800px;
  height: 382px;
}
</style>
